import React, { useState } from 'react';
import axios from 'axios';
import config from '../../Config';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import {
  selectUser,
  selectApi_permission,
  selectRouter_permission,
  loginIn,
} from '../../redux/Slice/userSlice';
import { Form, Input, message, Checkbox, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

export default () => {
  let navigate = useNavigate();
  const dispatch = useDispatch();
  const [loading, SetLoading] = useState(false);
  const onFinish = values => {
    SetLoading(true);
    if (config.isDev) navigate('/pages');
    else
      axios
        .post(config.baseURL + '/user/login', values)
        .then(function (response) {
          console.log(response);
          let resData = response.data.data;
          if (response.data.code == 1) {
            dispatch(loginIn(resData));
            navigate('/pages');
            message.success('登录成功', 1);
            SetLoading(false);
          } else if (response.data.code >= 10000) {
            message.error(response.data.message, 1);
            SetLoading(false);
          }
        })
        .catch(function (error) {
          console.log(error);
          SetLoading(false);
        });
  };

  return (
    <Form
      name="normal_login "
      className="login-form sign-in-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      size="large"
    >
      <Form.Item style={{ position: 'relative', top: '-100px' }}>
        <h1>大型精密仪器管理系统</h1>
      </Form.Item>
      <Form.Item>
        <h2 className="form-title">登录</h2>
      </Form.Item>
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入您的账号!',
          },
          {
            pattern: /^[a-z0-9A-Z_-]{3,16}$/,
            message: '用户名由3-16位拼音字母下划线横杠组成',
          },
        ]}
      >
        <Input
          prefix={<UserOutlined className="site-form-item-icon" />}
          style={{ width: '250px', height: '30px' }}
          placeholder="账号"
        />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            pattern: /^[a-z0-9A-Z_-]{6,16}$/,
            message: '密码由6-16位拼音字母下划线横杠组成',
          },
          {
            required: true,
            message: '请输入您的密码!',
          },
        ]}
      >
        <Input.Password
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="密码"
          style={{ width: '250px', height: '30px' }}
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>自动登录</Checkbox>
        </Form.Item>
      </Form.Item>

      <Form.Item>
        <Button
          loading={loading}
          htmlType="submit"
          className="submit-btn"
          type="primary"
          shape="round"
          size="large"
          style={{ color: 'white' }}
        >
          立即登录
        </Button>
      </Form.Item>
    </Form>
  );
};
